#app:has(.big-screen) {
  // background-color: #05285f;
  // border: 0;
  // font-size: 0;
  // width: 100%;
  // height: 100%;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.big-screen {
  align-items: flex-start;
  // background-color: #05285f;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  // padding: 80px 32px;
  .screen-title {
    height: 54px;
  }
  .screen-left {
    .device-count {
      margin-bottom: 24px;
      .count-top {
        width: 480px;
        height: 93px;
        margin: 20px 0 24px 0;
        .count-option {
          width: 130px;
          height: 100%;
          background: url("../assets/sbgl/device-count-bg.png") no-repeat 100%
            100% / 100% 100%;
          .count-value {
            padding-top: 19px;
            font-weight: bold;
            font-size: 24px;
            color: #32c5ff;
            line-height: 26px;
            margin-bottom: 6px;
            text-align: center;
          }
          .count-title {
            font-weight: 500;
            font-size: 14px;
            color: #fff;
            line-height: 18px;
            text-align: center;
          }
        }
      }
      .count-center {
        justify-content: flex-start;
        .count-chart {
          width: 480px;
          height: 245px;
        }
      }
    }
    .device-good {
      .good-main {
        width:480px;
        margin: 24px 0 30px 0;
        .good-card {
          width: 230px;
          height: 117px;
          box-sizing: border-box;
          padding: 30px 0 0 18px;
          background: url("../assets/sbgl/device-good-bg.png") no-repeat 100%
            100% / 100% 100%;
          .good-info {
            .good-title {
              font-weight: bold;
              font-size: 16px;
              color: #ffffff;
              line-height: 20px;
              margin-bottom: 12px;
            }
            .good-value {
              font-weight: bold;
              font-size: 24px;
              color: #00a2df;
              line-height: 25px;
              justify-content: flex-start;
              .good-unit {
                font-weight: 400;
                font-size: 14px;
                color: #00a2df;
                margin: 3px 0 0 5px;
              }
            }
          }
          .card-chart {
            width: 67px;
            height: 67px;
          }
        }
      }
      .good-chart {
        width: 400px;
        height: 270px;
      }
    }
  }
  .screen-right {
    .device-repair {
      .repair-main {
        height: 320px;
        .repair-chart {
          width: 470px;
          height: 270px;
        }
        .repair-list {
          .repair-option {
            width: 240px;
            height: 43px;
            margin-bottom: 17px;
            box-sizing: border-box;
            padding: 0 35px;
            &:last-child {
              margin-bottom: 0;
            }
            .option-left {
              .option-point {
                width: 17px;
                height: 17px;
                box-sizing: border-box;
                padding: 3px;
                border: 1px solid #13e7ff;
                margin-right: 10px;
                .point-inner {
                  width: 100%;
                  height: 100%;
                }
              }
              .option-title {
                font-weight: 400;
                font-size: 15px;
              }
            }
            .option-value {
              font-size: 20px;
              font-weight: bold;
            }
            &:nth-child(1) {
              .option-left {
                .option-point {
                  border-color: #00d059;
                  .point-inner {
                    background-color: #00d059;
                  }
                }
                .option-title {
                  color: #00d059;
                }
              }
              .option-value {
                color: #00d059;
              }
            }
            &:nth-child(2) {
              .option-left {
                .option-point {
                  border-color: #fffa92;
                  .point-inner {
                    background-color: #fffa92;
                  }
                }
                .option-title {
                  color: #fffa92;
                }
              }
              .option-value {
                color: #fffa92;
              }
            }
            &:nth-child(3) {
              .option-left {
                .option-point {
                  border-color: #13e7ff;
                  .point-inner {
                    background-color: #13e7ff;
                  }
                }
                .option-title {
                  color: #13e7ff;
                }
              }
              .option-value {
                color: #13e7ff;
              }
            }
            &:nth-child(4) {
              .option-left {
                .option-point {
                  border-color: #ff627d;
                  .point-inner {
                    background-color: #ff627d;
                  }
                }
                .option-title {
                  color: #ff627d;
                }
              }
              .option-value {
                color: #ff627d;
              }
            }
          }
        }
      }
    }
    .device-maintain {
      .maintain-top {
        height: 230px;
        .top-left {
          width: 193px;
          height: 167px;
          margin-right: 45px;
          box-sizing: border-box;
          padding: 35px 0 0 10px;
          background: url("../assets/sbgl/maintain-bg.png") no-repeat 100% 100% /
            100% 100%;
          .top-title {
            font-weight: 500;
            font-size: 13px;
            color: #fff;
            line-height: 21px;
            margin-bottom: 5px;
            .top-rate {
              display: inline-block;
              margin-left: 3px;
              color: #fedb65;
            }
          }
          .top-num {
            font-weight: bold;
            font-size: 32px;
            color: #66ffff;
            line-height: 38px;
            text-align: center;
            margin-bottom: 24px;
          }
          .top-desc {
            font-weight: 500;
            font-size: 19px;
            color: #ebe6e6;
            line-height: 76px;
            text-align: left;
          }
        }
        .top-info {
          .info-title {
            font-weight: 500;
            font-size: 19px;
            color: #ebe6e6;
            line-height: 27px;
            letter-spacing: 2px;
            margin-bottom: 20px;
          }
          .info-value {
            font-weight: bold;
            font-size: 24px;
            color: #ebe6e6;
            line-height: 26px;
          }
        }
      }
      .maintain-title {
        font-weight: 500;
        font-size: 19px;
        color: #ebe6e6;
        line-height: 27px;
        margin-bottom: 20px;
      }
      .maintain-list {
        width:480px;
        .list-outer {
          .list-option {
            width: 220px;
            height: 34px;
            margin-bottom: 7px;
            box-sizing: border-box;
            padding-left: 7px;
            line-height: 34px;
            font-weight: 500;
            font-size: 14px;
            color: #fff;
            &.active {
              color: #ff6565;
            }
          }
        }
        .list-left {
          .list-option {
            background: url("../assets/sbgl/maintain-option-left.png") no-repeat
              100% 100% / 100% 100%;
            padding-left: 20px;
            text-align: left;
          }
        }
        .list-line {
          margin: 12px 7px;
          width: 1px;
          height: 100%;
          background-color: #32c5ff;
        }
        .list-right {
          .list-option {
            background: url("../assets/sbgl/maintain-option-right.png")
              no-repeat 100% 100% / 100% 100%;
            padding-right: 30px;
            text-align: right;
          }
        }
      }
    }
  }
}
